@charset "UTF-8";
.contains{
	position :fixed;
	top:30%;
	margin :40px;
	width:30px;
}
.content{
	position :fixed;
	top:20%;
	margin :10px;
	height :50px;
	width :900px;
	left :28%;
    box-sizing:box;

}
.student {
	position :absolute;
	margin :20px;
	width :900px;
	left :30%;
	box-sizing:box;
	top :30%;
	border :solid 3px black;
}
.student td{
	margin-left:10px;
	padding-left:10px;
	width:60px;
}
.button.show{
    margin:10px 0 10px 80px;
    width :60px;
    height :60px;
	text-align:center;
	outline:none;
	border :white;
	font-size :25px;
	border-radius :30%;
    cursor:default;
}
.button.show.fi{	
	animation :anime_1 2s;
	animation-iteration-count: infinite;
	animation-timing-function:cubic-bezier(0.5,0,0.5,1);
	animation-delay:0s;
}
.button.show.se{
	animation :anime_1 2s;
	animation-iteration-count: infinite;
	animation-timing-function:cubic-bezier(0.5,0,0.5,1);
	animation-delay:0.4s;
}
.button.show.th{
	animation :anime_1 2s;
    animation-iteration-count: infinite;
	animation-timing-function:cubic-bezier(0.5,0,0.5,1);
	animation-delay:0.8s;
}
.button.show.fo{
	animation :anime_1 2s;
    animation-iteration-count: infinite;
	animation-timing-function:cubic-bezier(0.5,0,0.5,1);
	animation-delay:1.2s;
}
.button.show.fv{
	animation :anime_1 2s;
    animation-iteration-count: infinite;
	animation-timing-function:cubic-bezier(0.5,0,0.5,1);
	animation-delay:1.6s;
}
.contains ul{
	display :inline;
	list-style-type :none;
}
.contains li:first-child{
	border-radius:15% 15% 0 0;
}
.contains li{	
	border-left:solid 5px black;
	height:50px;
	width:100px;
	background-image: linear-gradient(to right, #20d2f5 , white);
	margin-top:2px;
	margin-bottom:2px;
}
.contains li:hover{
	width:150px;
	transition:0.75s;
}
.contains li:last-child{
	border-radius :0 0 15% 15%;
}
.contains ul a{
	display :block;
	height:50px;
	width:100px;
	text-decoration :none;
	font-size :25px;
	color :black;
	text-align:center;
}
.contains a:hover{
    text-decoration :none;
    text-align:right;
    transition:0.75s;
    width:175px;
    }
.button.up{
border:white;
border-radius :20%;
margin :5px;
padding-left:10px;
width :100px;
height :30px;
text-align :cenger;
font-size :20px;
background :#b1a4a4;
	
}
.button.up:hover{
	background :balck;
	width :175px;
	color:white;
	transform:rotateY(-30deg);
	transition :0.75s;
	text-align:right;
}
.button:focus{
	outline:none;
}
.contains li:hover {
	border-left:solid 5px white;
	background-image: linear-gradient(to right, #ff5858 , white);
	color :black;
	transform:rotateY(-30deg);
	transition :0.75s;
}
.edit{
	display:none;
	position:fixed;
	text-align:center;
	padding:30px;
	left:30%;
	top:20%;
	width:450x;
	height:450px;
	border:solid 7px;
	background-color:white;
}
.edit p{
	height:50px;
}
.edit #id{
	font-size:30px;
}
.edit p span{
	padding-top:10px;
	float:left;
	font-size:25px;
	line-height:3px;
		
}
#insert p span{
	padding-top:18px;
}
#insert {
	left:30%;
}
.edit #search{
	height:600px;
}
.edit_button{
	bottom :7%;
	left :40%;
	height :50px;
	width :80px;
	border-radius :20px;
	border :4px solid black;
	background-color :white;
	text-align :center;
	display :inline-block;
	cursor :pointer;
	margin :3px 5px;
	font-size :10px;
	outline:none;
}
 #search_button{
	margin-top:110px;
}
.edit .text_style{
	float:right;
	border :3px solid black;
	border-radius :15px 5px 5px 15px;
	position :relative;
	left : 20px;
	height :45px;
	width :300px;
	padding-left :15px;
	font-size :23px;
	transition :0.75s;
}
.search{
border:solid 3px;
border-radius:10%;	
text-align:left;
font-size:30px;
}

.page-item {
	padding: 1px 5px;
	border: 1px solid #afafaf;
	margin-left: 3px
}

.page-item.active {
	color: red;
	border: 1px solid red;
}
input:focus{	
	outline :none;
	box-shadow :0 5px #d7d1be;
}
input:hover::placeholder{
	color: rgba(0,0,0,0);
	transition :0.75s;
}
.button.up:active{
	animation:anime_3 0.75s;
}
.edit_button:active{
                color:red;
                box-shadow :0 5px #d7d1be;
                transform :translateY(4px);
                transition :0s;
}
.edit_button:focus{
	outline :none;
}
.edit_button:hover{
	height:60px;
	width :60px;
	border-radius :40%;
	bottom :8%;
	left :43%;
	font-size :15px;
	transition :1s;
	animation :anime_2 1.75s linear infinite;
}
@keyframes anime_2{
	100%{transform: rotate(360deg)}
}
@keyframes anime_1{50%{transform :translateY(-30px)}}
@keyframes anime_3{
	100%{scrollTop:0;}
}